<template>
  <section>
    <search-box>
      <div class="flex-row-reverse">
        <el-button type="primary" @click="FnOpenMirror('create')" :disabled="FnBtnDisabled('eks_2_createImage')">新建镜像</el-button>
        <el-button type="text" @click="FnGetImgList">
          <i class="el-icon-refresh" style="font-size: 20px"></i>
        </el-button>
      </div>
    </search-box>
    <el-table :data="configList" border>
      <el-table-column prop="img_id" min-width="120" label="img_id"></el-table-column>
      <el-table-column prop="img_name" min-width="120" label="img_name"></el-table-column>
      <el-table-column prop="image_show_name" min-width="140" label="image_show_name"></el-table-column>
      <el-table-column prop="gpu_type" min-width="100" label="gpu_type">
        <template #default="scope">
          {{ scope.row.gpu_type ? scope.row.gpu_type : "-" }}
        </template>
      </el-table-column>
      <el-table-column prop="os" min-width="80" label="OS"></el-table-column>
      <el-table-column prop="k8s_version" min-width="120" label="k8s_version"></el-table-column>
      <el-table-column prop="runtime" min-width="80" label="runtime"></el-table-column>
      <el-table-column prop="gpu_type_id" min-width="120" label="gpu_type_id">
        <template #default="scope">
          {{ scope.row.gpu_type_id ? scope.row.gpu_type_id : "-" }}
        </template>
      </el-table-column>
      <el-table-column prop="source" label="来源" min-width="120"></el-table-column>
      <el-table-column label="状态" min-width="80">
        <template #default="scope">
          <span :class="scope.row.is_valid === 1 ? 'is-enable' : 'is-disable'">
            {{ scope.row.is_valid === 1 ? '已启用' : '已禁用' }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template #default="scope">
          <el-button 
            type="text" 
            @click="FnOpenMirror('edit',scope.row)"
            :disabled="FnBtnDisabled('eks_2_updateImage')">更新</el-button>
          <el-button
            type="text"
            @click="FnChangeValid(scope.row)"
            :disabled="FnBtnDisabled('eks_2_enableImage')"
            v-if="scope.row.is_valid === 0">启用</el-button>
          <el-button
            type="text"
            @click="FnChangeValid(scope.row)"
            :disabled="FnBtnDisabled('eks_2_disableImage')"
            v-if="scope.row.is_valid === 1">禁用</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      v-model="dialogData.visible"
      title="新建镜像"
      width="700px"
      :before-close="handleClose">
      <el-form 
        :model="dialogData.form"
        :rules="dialogData.rules"
        label-width="150px" 
        label-position="left"
        ref="mirrorRef">
        <el-form-item label="img_id" prop="img_id">
          <el-input class="w-280" v-model="dialogData.form.img_id"></el-input>
        </el-form-item>
        <el-form-item label="img_name" prop="img_name">
          <el-input class="w-280" v-model="dialogData.form.img_name"></el-input>
        </el-form-item>
        <el-form-item label="image_show_name" prop="image_show_name">
          <el-input class="w-280" v-model="dialogData.form.image_show_name"></el-input>
        </el-form-item>
        <el-form-item label="gpu_type" prop="gpu_type">
          <el-input class="w-280" v-model="dialogData.form.gpu_type"></el-input>
        </el-form-item>
        <el-form-item label="OS" prop="os">
          <el-input class="w-280" v-model="dialogData.form.os" v-if="!dialogData.isEdit"></el-input>
          <span v-else>{{ dialogData.form.os }}</span>
        </el-form-item>
        <el-form-item label="k8s_version" prop="k8s_version">
          <el-input class="w-280" v-model="dialogData.form.k8s_version" v-if="!dialogData.isEdit"></el-input>
          <span v-else>{{ dialogData.form.k8s_version }}</span>
        </el-form-item>
        <el-form-item label="runtime" prop="runtime">
          <el-input class="w-280" v-model="dialogData.form.runtime" v-if="!dialogData.isEdit"></el-input>
          <span v-else>{{ dialogData.form.runtime }}</span>
        </el-form-item>
        <el-form-item label="gpu_type_id" prop="gpu_type">
          <el-input class="w-280" v-model="dialogData.form.gpu_type_id"></el-input>
        </el-form-item>
        <el-form-item label="source" prop="source">
          <el-input class="w-280" v-model="dialogData.form.source" v-if="!dialogData.isEdit"></el-input>
          <span v-else>{{ dialogData.form.source }}</span>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button @click="FnAddMirror" type="primary">确定</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog
      v-model="editDiaVisible"
      title="提示"
      width="400px"
      :before-close="editDiaClose">
      <div class="font-18 m-b-10">当前镜像更新信息如下，请仔细确认：</div>
      <div class="flex-row">img_id：{{ dialogData.form.img_id }}</div>
      <div class="flex-row">img_name：{{ dialogData.form.img_name }}</div>
      <div class="flex-row">image_show_name：{{ dialogData.form.image_show_name }}</div>
      <div class="flex-row">os：{{ dialogData.form.os }}</div>
      <div class="flex-row">k8s_version：{{ dialogData.form.k8s_version }}</div>
      <div class="flex-row">runtime：{{ dialogData.form.runtime }}</div>
      <div class="flex-row">gpu_type：{{ dialogData.form.gpu_type }}</div>
      <div class="flex-row">gpu_type_id{{ dialogData.form.gpu_type_id }}</div>
      <div class="flex-row">source{{ dialogData.form.source }}</div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="editDiaClose">取 消</el-button>
          <el-button @click="FnAddDiaMirror" type="primary">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </section>
</template>
<script setup>
import { reactive, ref, watch } from 'vue';
import { useRoute } from 'vue-router'
import { authBtnDisabled } from '@/utils/auth.js'
import searchBox from '@/components/search-box.vue';
import imgService from "@/service/eks/image.js"
import { ElMessage, ElMessageBox } from 'element-plus' 

const route = useRoute()
const FnBtnDisabled = (key) => {
  return authBtnDisabled(key, route.meta.name)
}
const configList = ref([])
const dialogData = reactive({
  visible: false,
  isEdit: false,
  form: {
    img_id: '',
    img_name: '',
    image_show_name: '',
    os: '',
    k8s_version: '',
    runtime: '',
    gpu_type: '',
    gpu_type_id: '',
    source: '',
  },
  rules: {
    img_id: [{required: true, message: '请输入img_id', required: ['input', 'change', 'blur']}],
    img_name: [{required: true, message: '请输入img_name', required: ['input', 'change', 'blur']}],
    image_show_name: [{required: true, message: '请输入image_show_name', required: ['input', 'change', 'blur']}] ,
    os: [{required: true, message: '请输入os', required: ['input', 'change', 'blur']}],
    k8s_version: [{required: true, message: '请输入k8s_version', required: ['input', 'change', 'blur']}],
    runtime: [{required: true, message: '请输入runtime', required: ['input', 'change', 'blur']}],
    source: [{required: true, message: '请输入source', required: ['input', 'change', 'blur']}]
  }
})
const FnGetImgList = () => {
  imgService.getImgList().then(res => {
    if(res.code === 'Success') {
      configList.value = res.data ? res.data : []
    }
  })
}
FnGetImgList()
const editId = ref(null)
const FnOpenMirror = (type, row) => {
  if(type === 'create') {
    dialogData.isEdit = false
  } else if(type === 'edit') {
    dialogData.isEdit = true
    const {id, img_id, img_name, image_show_name, os, k8s_version, runtime, gpu_type, gpu_type_id, source} = row
    dialogData.form.img_id = img_id
    dialogData.form.img_name = img_name
    dialogData.form.image_show_name = image_show_name
    dialogData.form.os = os
    dialogData.form.k8s_version = k8s_version
    dialogData.form.runtime = runtime
    dialogData.form.gpu_type = gpu_type
    dialogData.form.gpu_type_id = gpu_type_id
    dialogData.form.source = source
    editId.value = id
  }
  dialogData.visible = true
}

const editDiaVisible = ref(false)

const mirrorRef = ref(null)
const FnAddMirror = () => {
  mirrorRef.value.validate(valid => {
    if(valid) {
      if(dialogData.isEdit) {
        // 编辑
        editDiaVisible.value = true
      } else {
        // 新增
        imgService.addImg(dialogData.form).then(res => {
          if(res.code === 'Success') {
            ElMessage.success('新建镜像成功！')
            FnGetImgList()
            handleClose()
          }
        })
      }
    }
  })
}
const FnAddDiaMirror = () => {
  const { img_id, img_name, image_show_name, gpu_type, gpu_type_id } = dialogData.form
  let params = {
    id: editId.value,
    img_id,
    img_name,
    image_show_name,
    gpu_type,
    gpu_type_id
  }
  
  imgService.updateImg(params).then(res => {
      if(res.code === 'Success') {
        ElMessage.success('更新镜像成功！')
        editDiaClose().then(() => {
          FnGetImgList()
          handleClose()
        })
        
      }
    })
}
const editDiaClose = async () => {
  editDiaVisible.value = false
}
const handleClose = () => {
  editId.value = ''
  dialogData.form = {
    img_id: "",
    img_name: "",
    image_show_name: "",
    os: "",
    k8s_version: "",
    runtime: "",
    gpu_type: "",
    gpu_type_id: ""
  }
  mirrorRef.value.resetFields()
  dialogData.visible = false
}
const validImage = (type, params) => {
  switch (type) {
    case 'enable':
      return imgService.enableImg(params)
    case 'disable':
      return imgService.disableImg(params)
  }
}
const FnChangeValid = (row) => {
  ElMessageBox.confirm(
    row.is_valid ? '是否禁用当前镜像' : '是否启用当前镜像',
    '提示',
    {
      confirmButton: '确认',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    validImage(row.is_valid ? 'disable' : 'enable', {id: row.id}).then(res => {
      if(res.code == 'Success') {
        ElMessage.success(row.is_valid ? '禁用成功' : '启用成功')
        FnGetImgList()
      }
    })
  })
}
</script>
<style scoped lang="scss">
.is-enable {
  color: #28C41A
}
.is-disable {
  color: #9D9DAD
}
</style>